<script setup lang="ts">
import {PropType, computed, inject, ref} from 'vue'
import {defineVaDataTableColumns, VaImage} from 'vuestic-ui'
import { Activity, Pagination, Sorting } from '../types'
import { useVModel } from '@vueuse/core'

const columns = defineVaDataTableColumns([
  { label: 'Activity id', key: 'id', sortable: true },
  { label: 'Activity name', key: 'name', sortable: true },
  { label: 'description', key: 'description', sortable: true },
  { label: 'status', key: 'status', sortable: true },
  { label: 'lotteryType', key: 'lotteryType', sortable: true },
  { label: 'maxParticipants', key: 'maxParticipants', sortable: true },
  { label: 'qrCodeTicket', key: 'qrCodeTicket', sortable: true },
  { label: ' ', key: 'actions' },
])

const props = defineProps({
  dataList: {
    type: Array as PropType<Activity[]>,
    required: true,
  },
  loading: {
    type: Boolean,
    required: true,
  },
  sortBy: {
    type: String as PropType<Sorting['sortBy']>,
    default: undefined,
  },
  sortingOrder: {
    type: String as PropType<Sorting['sortingOrder']>,
    default: undefined,
  },
  pagination: {
    type: Object as PropType<Pagination>,
    required: true,
  },
})

const emit = defineEmits<{
  (event: 'edit', activity: Activity): void
  (event: 'delete', activity: Activity): void
  (event: 'view', activity: Activity): void
}>()

const sortByVModel = useVModel(props, 'sortBy', emit)
const sortingOrderVModel = useVModel(props, 'sortingOrder', emit)

const totalPages = computed(() => Math.ceil(props.pagination.total / props.pagination.perPage))

const isModalVisible = ref(false)
const bigImageUrl = ref("")
const openModal = (url: string) => {
  bigImageUrl.value = url;
  isModalVisible.value = true
  console.log(url)
}
</script>

<template>
  <!-- 弹出的 Modal -->
  <VaModal v-model="isModalVisible" hide-default-actions>
    <img
      :src="'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + bigImageUrl"
      style="max-width: 100%; max-height: 80vh; display: block; margin: auto;"
    />
  </VaModal>

  <div>
    <VaDataTable
      v-model:sort-by="sortByVModel"
      v-model:sorting-order="sortingOrderVModel"
      :items="dataList"
      :columns="columns"
      :loading="loading"
    >
      <template #cell(qrCodeTicket)="{ rowData }">
        <div class="ellipsis max-w-[230px] lg:max-w-[450px]">
          <VaButton @click="openModal(rowData.qrCodeTicket)"  v-if="rowData.qrCodeTicket != null"  preset="primary"
                    size="small"
                    color="primary"
                    aria-label="Edit project">open qrCode</VaButton>
        </div>
      </template>
      <template #cell(lotteryType)="{ rowData }">
        <div class="ellipsis max-w-[230px] lg:max-w-[450px]">
          <div v-if="rowData.lotteryType=='1'">withdraw after winning</div>
          <div v-if="rowData.lotteryType=='2'">participate in other levels of draws</div>
          <div v-if="rowData.lotteryType=='3'">participate in other levels of draws</div>
        </div>
      </template>

      <template #cell(actions)="{ rowData }">
        <div class="flex gap-2 justify-end">
          <VaButton  v-if="rowData.status =='unpublished'"
            preset="primary"
            size="small"
            color="primary"
            icon="mso-edit"
            aria-label="Edit project"
            @click="$emit('edit', rowData as Activity)"
          />
          <VaButton  v-if="rowData.status !='unpublished'"
                     preset="primary"
                     size="small"
                     color="primary"
                     icon="mso-edit"
                     aria-label="Edit project"
                     @click="$emit('view', rowData as Activity)"
          />
          <VaButton
            preset="primary"
            size="small"
            icon="mso-delete"
            color="danger"
            aria-label="Delete project"
            @click="$emit('delete', rowData as Activity)"
          />
        </div>
      </template>
    </VaDataTable>
    <div class="flex flex-col-reverse md:flex-row gap-2 justify-between items-center py-2">
      <div>
        <b>{{ $props.pagination.total }} results.</b>
        Results per page
        <VaSelect v-model="$props.pagination.perPage" class="!w-20" :options="[10, 50, 100]" />
      </div>

      <div v-if="totalPages > 1" class="flex">
        <VaButton
          preset="secondary"
          icon="va-arrow-left"
          aria-label="Previous page"
          :disabled="$props.pagination.page === 1"
          @click="$props.pagination.page--"
        />
        <VaButton
          class="mr-2"
          preset="secondary"
          icon="va-arrow-right"
          aria-label="Next page"
          :disabled="$props.pagination.page === totalPages"
          @click="$props.pagination.page++"
        />
        <VaPagination
          v-model="$props.pagination.page"
          buttons-preset="secondary"
          :pages="totalPages"
          :visible-pages="5"
          :boundary-links="false"
          :direction-links="false"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.va-data-table {
  ::v-deep(tbody .va-data-table__table-tr) {
    border-bottom: 1px solid var(--va-background-border);
  }
}
</style>
